<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('数据概览')" />
    <th:block th:include="include :: switchery-css" />
    <style>
        html {
            font-family: PingFang SC, PingFang SC-Semibold;
        }
        [v-cloak] {
            display: none;
        }
        .recent-day{
            font-size: 12px; color: #9c9c9c;
        }
        .stat-box-item{
            width: 33%; text-align: center
        }
        .right-border-a:not(:last-child)::after {
            content: "";
            position: absolute;
            top:70px;
            width: 1px;
            left: 30%;
            height: 30px;
            border-left: 1px solid #c4c4c4;
        }
        .border-after::after {
            content: "";
            position: absolute;
            width: 1px;
            left: 90%;
            height: 180px;
            border-left: 1px solid #dfdfdf;
        }
        .right-border-b::after {
            content: "";
            position: absolute;
            top:70px;
            left: 63%;
            width: 1px;
            height: 30px;
            border-left: 1px solid #dcdcdc;
        }
        .image-box {
            height: 180px;display: flex;align-items: center;
        }
        .stat-num-font{
            font-weight: bold;
        }
        .stat-label{
            font-size: 12px;
            font-weight: 400;
            color: #bdbdbd;
            line-height: 13px;
        }
        table tr td{
            border-top: 1px solid #f1f1f1  !important;
        }
        .plate {
            border-radius: 5px;
            padding: 5px;
            font-size: 11px;
            background: #ffb700;
            color: white;
            margin-right: 10px;
        }
        .info-top{
            display: flex;
            align-items: center;
            padding-bottom:10px;
        }
        .sequence {
            width: 65px;
            height: 23px;
            background-color: #F28897;
            clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
            position: relative;
            margin-right: 10px;
        }
        .sequence span {
            position: absolute;
            color: #fff;
            left: 16px;
            top: 4px;
            font-size: 10px;
        }
        .work-time{
            border-bottom: 1px solid #999999;
            margin:0 10px;
            color:#999999;
            font-size: 10px;
            position: relative;
            top:-7px;
            padding: 0 4px;
        }
        .working{
            background: #44C788;
            padding:2px 10px;
            color:white;
            border-radius: 99px;
            font-weight: normal;
            font-size: 12px;
        }
        .info-middle{
            border: 1px solid #e1e1e1;
            display: flex;
            padding-bottom:15px;
        }
        .info-middle-left{
            flex:3;
        }
        .info-middle-right{
            flex:1;
            text-align: center;
        }
        .middle-left-top{
            display: flex;
            justify-content: space-around;
            padding:15px 0;
        }
        .middle-left-top div{
        }
        .icon-font{
            font-size: 32px;
            width: 45px;
            text-align: center;
            border: 1px solid #eeeeee;
            color: #49a6ed;
            padding: 5px;
        }
        .icon-box{
            display: flex;
        }
        .info-bottom{
            padding-top: 10px;
            color: #BEBEBE;
        }
        .split-box {
            background: #f1f1f1; height: 4px;
            margin: 0 -20px;
            border-radius: 15px;
        }
        .info-box{
            padding:10px 0;
        }
    </style>
</head>
<body style="background: #f3f3f3;">
<div id="main" v-cloak  class="wrapper wrapper-content">
    <div class="container">
        <div class="row">
            <div class="col-md-6" style="padding-right:0px;">
                <div class="ibox float-e-margins"  style="margin-bottom: 15px;">
                    <div class="ibox-title">
                        <span class="pull-right recent-day" >近7日运输：{{taskOverview.recent7Days}}次</span>
                        <h5 style="padding-top: 2px;">今日统计&nbsp;&nbsp;</h5>
                        <a class="badge badge-success" style="background: #1879ff">实时</a>
                    </div>
                    <div class="ibox-content"  style="border:none; height: 130px;">
                        <div style="display: flex; flex-direction: row; justify-content: space-between; margin-bottom: 10px;">
                            <div class="stat-box-item right-border-a" style="text-align: left;width: 26%">
                                <h2 class="stat-num-font" style="color:black;padding-left: 10px;">{{taskOverview.todayCount}}</h2>
                                <p class="stat-label">今日运输</p>
                            </div>
                            <div class="stat-box-item right-border-b">
                                <h2 class="stat-num-font" style="color: #1879ff;">{{taskOverview.todayOngoing}}</h2>
                                <p class="stat-label">进行中</p>
                            </div>
                            <div class="stat-box-item">
                                <h2 class="stat-num-font" style="color:black;">{{taskOverview.todayComplete}}</h2>
                                <p class="stat-label">已完成</p>
                            </div>
                        </div>
                        <div class="progress" style="margin: 0; height: 15px;">
                            <div v-bind:style="{width: progress + '%', lineHeight: '15px'}"  aria-valuemax="100" aria-valuemin="0" aria-valuenow="35" role="progressbar" class="progress-bar">
                                <span class="sr-only"></span>{{progress}}%
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="ibox float-e-margins"  style="margin-bottom: 15px;">
                    <div class="ibox-title">
                        <span class="label label-danger pull-right">提示</span>
                        <h5>补充登记</h5>
                    </div>
                    <div style="height: 130px;">
                        <div style="display: flex;">
                            <div style="flex:1; text-align: center; padding-top: 5px;">
                                <h1 class="stat-num-font" style="color:black;">{{unregistered.length}}</h1>
                                <p class="stat-label">待登记数</p>
                            </div>
                            <div style="flex:3; height: 110px;overflow-y: auto;">
                                <table class="table table-hover">
                                    <tr v-for="(item,index) in unregistered" v-bind:key="item.id">
                                        <td><span>{{item.plateNo}}</span></td>
                                        <td><span>{{item.workSequence}}次</span></td>
                                        <td><span class="line">{{item.startTime}}</span></td>
                                        <td class="text-navy" style="cursor: pointer;" @click="register(item.id)"> <i class="fa fa-edit">录入</i> </td>
                                    </tr>
                                </table>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--每个公司的车辆列表-->
        <div class="row" v-for="(item,index) in tasks" v-bind:key="index">
            <div class="col-lg-12" v-cloak>
                <div class="ibox float-e-margins" style="margin-bottom: 10px;">
                    <div class="ibox-title">
                        <h5 style="padding-top: 2px;">{{item.deptName}}&nbsp;&nbsp;</h5>
                        <a class="badge badge-success" style="background: #1879ff">{{item.tasks.length}}</a>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div  v-for="(task, no) in item.tasks" v-bind:key="no">
                            <div class="row info-box">
                                <div class="col-sm-2 image-box" style="">
                                    <img src="/img/car_bg.png" alt="" width="100%">
                                </div>
                                <div class="col-sm-10">
                                    <div class="info-top">
                                        <span class="plate">{{task.plateNo}}</span>
                                        <div class="sequence">
                                            <span>No.{{task.workSequence}}</span>
                                        </div>
                                        <span style="color: #666;">时间：{{task.startTime}}</span>
                                        <div class="work-time">{{task.duration}}</div>
                                        <div class="working" v-if="!task.endTime">运输中</div>
                                        <span style="color: #666;">{{task.endTime}}</span>
                                        <div  style="flex:1;text-align: right;">
                                            <i class="fa fa-calendar">&nbsp;&nbsp;{{task.workDate}}</i>
                                        </div>
                                    </div>
                                    <div class="info-middle" >
                                        <div class="info-middle-left">
                                            <div class="middle-left-top">
                                                <div class="icon-box">
                                                    <div class="icon-font  fa fa-tachometer"></div>
                                                    <div style="flex:1">
                                                        <span style="font-size: 16px;font-weight: bold;">{{task.pressure}}</span>
                                                        <span style="font-size: 10px;">MPa</span>
                                                        <br>
                                                        <span style="font-size: 10px; color: #565656;">标定 {{task.calibration.pressure}}Mpa</span>
                                                    </div>

                                                </div>
                                                <div  class="icon-box">
                                                    <i  class="icon-font fa fa-vimeo"></i>
                                                    <div style="flex:1">
                                                        <span style="font-size: 16px;font-weight: bold;">{{task.speed}}</span>
                                                        <span style="font-size: 10px;">m/min</span>
                                                        <br>
                                                        <span style="font-size: 10px; color: #565656">标定 {{task.calibration.speed}}m/min</span>
                                                    </div>
                                                </div>
                                                <div  class="icon-box">
                                                    <i  class="icon-font fa fa-lightbulb-o"></i>
                                                    <div style="flex:1">
                                                        <span style="font-size: 16px;font-weight: bold;">{{task.temperature}}</span>
                                                        <span style="font-size: 10px;">℃</span>
                                                        <br>
                                                        <span style="font-size: 10px; color: #565656">标定 {{task.calibration.temperature}}℃</span>
                                                    </div>
                                                </div>
                                                <div class="icon-box">
                                                    <i  class="icon-font fa fa-tint"></i>
                                                    <div style="flex:1">
                                                        <span style="font-size: 16px;font-weight: bold;">{{task.humidity}}</span>
                                                        <span style="font-size: 10px;">%rh</span>
                                                        <br>
                                                        <span style="font-size: 10px; color: #565656">标定 {{task.calibration.humidity}}%rh</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div style="color:#666;display: flex; justify-content: space-around;">
                                                <div>压力</div>
                                                <div>转速</div>
                                                <div>温度</div>
                                                <div>湿度</div>
                                            </div>
                                        </div>
                                        <div class="info-middle-right">
                                            <div style="padding:14px 0;font-size: 32px;">{{task.calcResult}}<span style="font-size: 10px;font-weight: normal">mm</span></div>
                                            <div style="text-align: center;color:#666">坍损值</div>
                                        </div>
                                    </div>
                                    <div class="info-bottom">
                                        最近更新：2022-04-21 11:11:11
                                        <span class="pull-right" style="cursor: pointer;color:#0074ff" @click="openDetail(task.no)">查看详情</span>
                                    </div>
                                </div>
                            </div>
                            <div class="split-box"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<th:block th:include="include :: footer" />
</body>
<script th:inline="javascript">

    $(document).ready(function () {
        $('.collapse-link').click( function() {
            var ibox = $(this).closest('div.ibox');
            var button = $(this).find('i');
            var content = ibox.find('div.ibox-content');
            content.slideToggle(200);
            button.toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');
            ibox.toggleClass('').toggleClass('border-bottom');
            setTimeout(function () {
                ibox.resize();
                ibox.find('[id^=map-]').resize();
            }, 50);
        });
    });

    (function() {
        const app = new Vue({
            el: '#main',
            created: function () {
                this.refresh();
            },
            computed:{
                progress() {
                    return (this.taskOverview.todayComplete * 100) /  this.taskOverview.todayCount;
                }
            },
            methods: {
                refresh() {
                    $.get('/concrete/monitor/query', res => {
                        if(res.code === 0){

                        }
                    });
                },
                register(id) {
                    $.modal.open("信息补录", '/concrete/register/append/' + id,  800, 600, (index, layero) => {
                        var iframeWin = layero.find('iframe')[0];
                        iframeWin.contentWindow.submitHandler(index, layero);
                        this.refresh();
                    });
                },
                openDetail(seqId) {
                    let url = '/device/algorithm/sequence-detail/' + seqId;
                    //$.modal.openTab("详情信息", url);
                    window.open(url, "_blank");
                }
            },
            data: {
                taskOverview: {
                    todayCount: 50,
                    todayOngoing: 5,
                    todayComplete: 45,
                    recent7Days: 129
                },
                unregistered: [
                    {
                        id: 6,
                        plateNo: '123',
                        workSequence: '01',
                        startTime: '2022-01-23 12:12:12',
                    },{
                        id: 7,
                        plateNo: '123',
                        workSequence: '01',
                        startTime: '2022-01-23 12:12:12',
                    }
                ],
                tasks: [
                    {
                        deptName: '山东精砼',
                        tasks:[
                            {
                                no: 6,
                                plateNo:'鲁B12345',
                                workSequence: '01',
                                startTime: '2022-02-02 12:12',
                                endTime: '2022-02-02 12:12',
                                duration: '00:34:21',
                                workDate: '2022-04-11',
                                calibration:{
                                    pressure:'10.101',
                                    speed:'10.101',
                                    temperature:'10.101',
                                    humidity:'10.101'
                                },
                                pressure:'10.101',
                                speed:'10.101',
                                temperature:'10.101',
                                humidity:'10.101',
                                calcResult: 11
                            },
                            {
                                no: 7,
                                plateNo:'鲁B12345',
                                workSequence: '01',
                                startTime: '2022-02-02 12:12',
                                endTime: '',
                                duration: '00:34:21',
                                workDate: '2022-04-18',
                                calibration:{
                                    pressure:'10.101',
                                    speed:'10.101',
                                    temperature:'10.101',
                                    humidity:'10.101'
                                },
                                pressure:'10.101',
                                speed:'10.101',
                                temperature:'10.101',
                                humidity:'10.101',
                                calcResult: 10
                            }
                        ]
                    }
                ]
            }
        });
    })();



</script>
</html>